import React, {PureComponent} from "react";
import LoginAndRegTitle from "./LoginAndRegTitle";
import {actionCreator} from "./store";
import {connect} from "react-redux";

class RegisterComponent extends PureComponent {

    render() {
        return (
            <div style={registerWrapperStyle}>
                <div style={registerContentStyle}>
                    {/*标题*/}
                    <LoginAndRegTitle
                        title={"注册"}
                    />
                    {/*注册内容*/}
                    <div style={registerCountStyle}>
                        <input
                            style={registerAccountStyle}
                            placeholder={"请输入账号"}
                            onChange={(e)=>{
                                this.props.changeInputAccount(e,false,0)
                            }}
                            value={this.props.registerAccountValue}
                        />
                        <input
                            style={registerPwdStyle}
                            placeholder={"请输入密码"}
                            onChange={(e)=>{
                                this.props.changeInputAccount(e,false,1)
                            }}
                            value={this.props.registerPwdValue}
                        />
                        <input
                            style={registerRepeatStyle}
                            placeholder={"请重复密码"}
                            onChange={(e)=>{
                                this.props.changeInputAccount(e,false,2)
                            }}
                            value={this.props.registerRepeatValue}
                        />
                        <div
                            style={registerLoginStyle}
                            onClick={()=>{
                                this.props.updateRegisterState(true,false)
                            }}
                        >去登录</div>
                        <div
                            style={registerSubmitStyle}
                            onClick={()=>{
                                this.props.updateRegisterState(true,false)
                            }}
                        >注册</div>
                    </div>
                </div>
            </div>
        );
    }

}
//registerAccountValue: "",
//     registerPwdValue: "",
//     registerRepeatValue: "",
const mapState = (state) => {
    return {
        registerAccountValue:state.getIn(["headerReducer","registerAccountValue"]),
        registerPwdValue:state.getIn(["headerReducer","registerPwdValue"]),
        registerRepeatValue:state.getIn(["headerReducer","registerRepeatValue"])
    }
};

const disMapState = (dispatch) => {
    return {
        changeInputAccount(e,tag,inputTag) {
            const action = actionCreator.changeLoginAccountInput(e,tag,inputTag);
            dispatch(action);
        },updateRegisterState(loginBool,resBool){
            const action = actionCreator.updateLoginAndRegisterState(loginBool,resBool);
            dispatch(action);
        }
    }
};


export default connect(mapState, disMapState)(RegisterComponent);

const registerWrapperStyle = {
    width: "100%",
    height: "100%",
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,.3)",
    zIndex: 5,
};

const registerContentStyle = {
    width: 400,
    height: 340,
    backgroundColor: "#fff",
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)",
};

const registerCountStyle = {
    margin: "30px 30px 0",
};

const registerAccountStyle = {
    width: 342,
    height: 37,
    border: "solid 1px #adadad",
    borderRadius: 2,
    boxSizing: "border-box",
    fontSize: 16,
    paddingLeft: 5,
    lineHeight: "37px",
};

const registerPwdStyle = {
    width: 342,
    height: 37,
    lineHeight: "37px",
    border: "solid 1px #adadad",
    borderRadius: 2,
    boxSizing: "border-box",
    marginTop: 10,
    paddingLeft: 5,
    fontSize: 16,
};

const registerRepeatStyle = {
    width: 342,
    height: 37,
    lineHeight: "37px",
    border: "solid 1px #adadad",
    borderRadius: 2,
    boxSizing: "border-box",
    marginTop: 10,
    marginBottom:10,
    paddingLeft: 5,
    fontSize: 16,
};

const registerLoginStyle = {
    color: "#3498db",
    position: "absolute",
    right: "30px",
    textDecoration: "underLine",
    fontSize: 14,
};

const registerSubmitStyle = {
    margin: "70px 0 0",
    width: 342,
    height: 40,
    lineHeight: "40px",
    textAlign: 'center',
    backgroundColor: "#3498db",
    borderRadius: 4,
    color: "#fff",
    fontSize: 16,
};

